<route lang="jsonc" type="page">
    {
      "style": {
			"navigationStyle": "custom",
			"navigationBarTitleText": "新增雪具"
		}
    }
</route>
<template>
	<view class="snowboard-page" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
		<header-navbar title="新增雪具" />

		<view class="form-list">
			<view class="form-item">
				<view class="lable">名称</view>
				<wd-input type="text" v-model="formData.name" no-border custom-class="input-style" placeholder="点击输入名称" />
			</view>
			<view class="form-item">
				<view class="lable">品牌</view>
				<wd-input
					v-if="formData.status === 1"
					type="text"
					v-model="formData.brand_name"
					no-border
					custom-class="input-style"
					placeholder="点击输入品牌"
					:max="20"
				>
					<template #suffix>
						<!-- <wd-icon name="arrow-down" size="18px" color='#FF844C' @click.stop="handleSelect('brand')"></wd-icon> -->
						<view class="btn-select" @click.stop="handleSelect('brand')">选择</view>
					</template>
				</wd-input>
				<wd-select-picker
					ref="brandRef"
					v-model="formData.brand"
					type="radio"
					:show-confirm="false"
					use-default-slot
					checked-color="#FF844C"
					:columns="brandCols"
					value-key="id"
					label-key="name"
					title="请选择品牌"
					@confirm="handleSelectBrand"
				>
					<view :class="['picker-input', { 'no-display': formData.status === 1 }]" @click="showBrand = true">
						<view :class="[{ select: formData.brand }]">{{ formData.brand_name || '点击选择品牌'}}</view>
						<wd-icon name="arrow-down" size="18px" color='#FF844C'></wd-icon>
					</view>
				</wd-select-picker>
			</view>
			<view class="form-item">
				<view class="lable">系列</view>
				<wd-input
					v-if="formData.status === 1"
					type="text"
					v-model="formData.series_name"
					no-border
					:max="20"
					custom-class="input-style"
					placeholder="点击输入系列"
				>
					<template #suffix>
						<view v-if="formData.brand !== 0" class="btn-select" @click.stop="handleSelect('series')">选择</view>
					</template>
				</wd-input>
				<wd-select-picker
					v-model="formData.series"
					type="radio"
					:show-confirm="false"
					use-default-slot
					checked-color="#FF844C"
					:columns="seriesCols"
					value-key="id"
					label-key="name"
					title="请选择系列"
					@confirm="handleSelectSeries"
				>
					<view :class="['picker-input', { 'no-display': formData.status === 1 }]" @click="showSeries = true">
						<view :class="[{ select: formData.series }]">{{ formData.series_name || '点击选择系列'}}</view>
						<wd-icon name="arrow-down" size="18px" color='#FF844C'></wd-icon>
					</view>
				</wd-select-picker>
			</view>
<!-- 			<view class="form-item">
				<view class="lable">型号</view>
				<wd-input type="text" v-model="formData.model" no-border custom-class="input-style" placeholder="点击输入型号" />
			</view> -->
			<view class="form-item">
				<view class="lable">单板/双板</view>
				<wd-select-picker
					v-model="formData.type"
					type="radio"
					:show-confirm="false"
					use-default-slot
					checked-color="#FF844C"
					:columns="columns"
				>
					<view class="picker-input" @click="showType = true">
						<view :class="[{ select: formData.type }]">{{ getTypeName }}</view>
						<wd-icon name="arrow-down" size="18px" color='#FF844C'></wd-icon>
					</view>
				</wd-select-picker>
			</view>
		
		</view>
		
		<view class="fixed-btn" :style="{ paddingBottom: safeAreaInsets?.bottom > 0 ? `${safeAreaInsets?.bottom}px` : null }">
			<!-- <view class="btn-save" @click="handleSave">保存</view> -->
			<wd-button custom-class="btn-save" :loading='loading' @click="handleSave">保存</wd-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import HeaderNavbar from '@/pages/components/header-navbar.vue';
	import { useSafeAreaInsets } from '@/mixins/basic'
	import { computed, onBeforeMount, onMounted, ref } from 'vue';
	import { addSnowboard, getSnowboardSelect } from '@/api/snowboard'

	defineOptions({
		name: 'AddSnowboard',
		options: {
			styleIsolation: 'shared'
		}
	})
	
	const { safeAreaInsets } = useSafeAreaInsets()
	
	const formData = ref<Record<string, any>>({
		name: '',
		brand: '',
		brand_name: '',
		series: '',
		series_name: '',
		model: '',
		type: '',
		// 0：系统品牌；1：用户自建
		status: 0
	})
	const brandRef = ref(null)
	const showBrand = ref<boolean>(false)
	const showSeries = ref<boolean>(false)
	const showType = ref<boolean>(false)
	const brandCols = ref<Record<string, any>>([
		{
			id: 0,
			name: '手动输入'
		}
	])
	const seriesCols  = ref<Record<string, any>>([
		// {
		// 	id: 0,
		// 	name: '手动输入'
		// }
	])
	const columns = ref<Record<string, any>>(
		[
			{
				label: '单板',
				value: '0'
			},
			{
				label: '双板',
				value: '1'
			}
		]
	)
	const loading = ref<boolean>(false)
	
	// onBeforeMount(() => {
	// 	uni.$on('snowboardData', (data) => {
	// 		formData.value = {
	// 			brand: data.brand || 0,
	// 			brand_name: data.brandTable?.name || data.brandUserTable?.name,
	// 			series: data.series || '',
	// 			series_name: data.seriesTable?.name || data.seriesUserTable?.name,
	// 			type: Number(data.type),
	// 			status: data.status,
	// 			name: data.name,
				
	// 		}
	// 		console.log(formData.value)
	// 	})
	// })
	
	onMounted(() => {
		getDropDownList({ pid: 0 })
	})
	
	
	// onUnload(() => {
	// 	uni.$emit('refreshIfNeeded', true)
	// })

	// 获取单双板的名称
	const getTypeName = computed(() => {
		const obj = {
			'': '点击选择单板/双板',
			0: '单板',
			1: '双板'
		}
		return obj[formData.value.type]
	})
	// 获取雪具品牌、系列下拉数据(pid = 0 品牌)
	function getDropDownList(params: AnyObject) {
		getSnowboardSelect(params).then(res => {
			if (params.pid === 0)
				brandCols.value.unshift(...res.my_eq)
			else seriesCols.value.unshift(...res.my_eq)
		})
	}
	// 选择了品牌回调
	function handleSelectBrand({ selectedItems }) {
		if (selectedItems.id === 0) {
			formData.value = {
				...formData.value,
				status: 1,
				series: '',
				series_name: '',
				brand_name: ''
			}
		} else if (selectedItems.id !== formData.value.pre_brand) {
			formData.value = JSON.parse(JSON.stringify({
				...formData.value,
				status: 0,
				series: '',
				series_name: '',
				brand_name: selectedItems.name,
				pre_brand: selectedItems.id
			}))
			// 根据品牌ID请求系列数据
			getDropDownList({ pid: selectedItems.id })
		}
	}

	// 品牌点击选择按钮
	function handleSelect(key: string) {
		// formData.value[key] = ''
		if (key === 'brand') {
			// showBrand.value = true
			brandRef.value?.open()
		} else if (key === 'series') showSeries.value = true
	}
	// 点击选择系列回调
	function handleSelectSeries({ selectedItems }) {
		formData.value.series_name = selectedItems.name
	}
	// 保存
	const handleSave = async () => {
		if (!formData.value.name) {
			uni.showToast({
				icon: 'none',
				title: '请输入名称'
			})
			return
		}
		
		let params = {
			name: formData.value.name,
			type: formData.value.type,
			status: formData.value.status
		}
		
		if (formData.value.status === 0) {
			if (!formData.value.brand) {
				uni.showToast({
					icon: 'none',
					title: '请选择品牌'
				})
				return
			}
			if (!formData.value.series) {
				uni.showToast({
					icon: 'none',
					title: '请选择系列'
				})
				return
			}
			
			params = Object.assign(params, {
				id: formData.value.brand,
				series: formData.value.series,
			})
		} else {
			if (!formData.value.brand_name) {
				uni.showToast({
					icon: 'none',
					title: '请输入品牌'
				})
				return
			}
			if (!formData.value.series_name) {
				uni.showToast({
					icon: 'none',
					title: '请输入系列'
				})
				return
			}
			params = Object.assign(params, {
				brand_name: formData.value.brand_name,
				series_name: formData.value.series_name,
			})
		}
		// if (!formData.value.model) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '请输入型号'
		// 	})
		// 	return
		// }
		
		if (!formData.value.type) {
			uni.showToast({
				icon: 'none',
				title: '请选择单板/双板'
			})
			return
		}
		loading.value = true
		
		addSnowboard(params).then(res => {
			uni.showToast({
				icon: 'success',
				title: '新增雪具成功'
			})

			uni.navigateBack()
		}).finally(() => {
			loading.value = false
		})
	}
</script>

<style lang="scss" scoped>
	.snowboard-page {
		padding: 50px 26px 98px 26px;
		
		.form-list {
			.form-item {
				& + .form-item {
					padding-top: 14px;
				}
				.lable {
					font-size: 16px;
					font-weight: 500;
					line-height: 20px;
					color: #23282C;
					padding-bottom: 5px;
				}
			}
		}
		
		.btn-select {
			font-size: 12px;
			width: 30px;
			text-align: right;
			color: $uni-main-color;
		}
		
		.fixed-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			// background-color: #FCFEFF;
			padding: 0 26px 26px 26px;
			:deep(.btn-save) {
				background-color: $uni-main-color;
				padding: 8px 0;
				border-radius: 8px;
				text-align: center;
				color: #fff;
				font-size: 18px;
				font-weight: 600;
				line-height: 24px;
				height: auto;
				width: 100%;
				
				&:active {
					background-color: rgba($uni-main-color, 0.9)
				}
			}
		}
	}
</style>